<template>
    <div class='bag-box'>
     <div class="img-box">
         <span class="biaoqian"> 全无套餐</span>
         <img src="@/assets/case.jpg" alt="">
     </div>
     <div class="bott">
         <div class="zi">
        <p>399元/m半包装修套餐</p> 
        <p class="ju"><span class="hui">特惠</span>可选300元/m品牌主材包</p>
    </div>
    <div class="you"><i>已预约295套</i></div>
     </div>
         <div class="img-box">
         <span class="biaoqian"> 全无套餐</span>
         <img src="@/assets/case.jpg" alt="">
     </div>
     <div class="bott">
         <div class="zi">
        <p>399元/m半包装修套餐</p> 
        <p class="ju"><span class="hui">特惠</span>可选300元/m品牌主材包</p>
    </div>
    <div class="you"><i>已预约295套</i></div>
     </div>
     <boto />
 </div>
</template>

<script>
import boto from "@/components/Bottom.vue"
export default {
    data() {
        return {};
    },
    mounted() {},
    methods: {},
    components:{
     boto
 }
};
</script>

<style lang='scss'>
.ju{
    color: #fd535d;
}
    .hui{
        color: #c3c3c3;
    }
.bag-box{
    width: 100%;height: 100%;
    background-color: #f4f4f4;
    overflow: hidden;
    .bott{
    background-color: whitesmoke;
    width: 98%;
    margin: 15px;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    .you{
        margin: 0;padding: 0;
        margin-right: 20px;
        margin-top: 40px;
        background-color: #ff4450;
        line-height: 50px;
        padding-right: 10px;
        margin-bottom: 15px;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }
}
    .img-box{
        width: 90%;
        height: 200px;
        position: relative;
        margin: 10px 20px;
        .biaoqian{
            background-color: #38c992;
            color: whitesmoke;
            float: left;
            position: absolute;
            top: 25px;
            left: -10px;
            z-index: 55;
            // margin-top: 30px;
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
